<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<cw:base />
	</head>
	<body>
		<style type="text/css">
.x-date-middle {
	padding-top: 2px;
	padding-bottom: 2px;
	width: 130px;
}

.x-date-picker {
	width: 150px; /*chrome*/
}
</style>
		<script type="text/javascript">
  	//属性表格数据
	var propdata={'appName':'WidgetCenter',
			  'version':'0.9',
			  'Dev':true,
			  'Created':new Date(Date.parse('10/25/2009')),
			  'Desc':'A Web Framwork'};
	var modifiedData=new Array();
	//模仿提交数据
	function submitData(id){
  		alert(modifiedData);	
  		modifiedData=new Array();
  	}
  	//获取变更数据
  	function propdata_propertychange(source,id,value,oldValue ){
  		var data="{id:'"+id+"',value:'"+value+"'}";
  		modifiedData.push(data);
  	}  	
  	</script>
  	<ul>
		<li>
			<b>属性表格相当于一个只包含名值两个列的可编辑表格，而且只能对值进行编辑和执行更新操作。</b>
		</li>
		<li>
			<b>属性表格构件的src属性定义属性的名值对，格式是json数据。</b>
		</li>
	</ul>
	<br/>
	<br/>
		<cw:propertyGrid src="propdata" id="propGrid" width="350" height="200"
			title="JS数据" propertyChange="propdata_propertychange" />
		<input type="button" value="测试提交" onclick="submitData('propGrid');" />
		<br />
		<cw:propertyGrid src="{'name':'xieguoking','sex':'1'}" id="propGrid1"
			width="350" height="200" title="ognl数据" />
		<br />
		<!-- 最简化 -->
		<cw:propertyGrid height="100" width="350"
			src="{'name':'xieguoking','email':'xieguoking@gmail.com'}" />
	</body>
	<cw:theme></cw:theme>
</html>
